<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>首页</title>
<style type="text/css">
#login_form, #user_operation {
  margin: 20px 0 0;
}
.index_form .control-group {
  float: left;
}
.index_form .control-label {
  width: 70px;
}
.index_form .controls {
  margin-left: 75px;
}
.index_btn {
  margin-left: 20px;
}
.advanced_search {
  margin-top: 5px;
  display: inline-block;
}
.advanced_search:hover, .advanced_search:visited {
  color: #0088cc;
}
#search_txt {
  width: 184px;
}
#select_area {
  width: 95px;
  height: 31px;
  background: url(${ctx}/static/images/search_list.gif) no-repeat;
  cursor: pointer;
  border: none;
  font-size: 13px;
  text-align: center;
  padding-right: 27px;
}
</style>
<script>
  var selectAreaModalLoaded = false;
  $(document).ready(function() {
    if ('<shiro:user>logined</shiro:user>') {
      $('#login_form').hide();
      $('#user_operation').show();
    } else {
      $('#login_form').submit(function() {
        return false;
      }).validate();
      $('#login_form_btn').click(function() {
        $.ajax('${ctx}/member/ajax-login', {
          data: { username: $('#username').val(), password: $('#password').val() },
          dataType: 'json',
          type: 'POST',
          success: function(resp) {
            if (resp.err) {
              window.alert('登录失败：' + resp.err);
              if (console !== undefined) {
                console.log(resp);
              }
            } else {
              $('#display_user_name').text(resp.name);
              $('#login_form').hide();
              $('#user_operation').show();
            }
          }, error: function(error) {
            window.alert('发生错误，请查看浏览器日志。');
            if (console !== undefined) {
              console.error(error);
            }
          }
        });
      });
    }
  });
</script>
</head>

<body>
  <div class="row">
    <img src="${ctx}/static/images/logo1.jpg" width="102" height="77" style="margin-left: 13px;">我爱千里马
    <form id="login_form" class="index_form form-horizontal pull-right span6">
      <div class="control-group">
        <label for="username" class="control-label">用户名:</label>
        <div class="controls">
          <input type="text" id="username" name="username" class="span2 required" />
        </div>
      </div>
      <div class="control-group">
        <label for="password" class="control-label">密码:</label>
        <div class="controls">
          <input type="password" id="password" name="password" class="span2 required" />
        </div>
      </div>
      <input id="login_form_btn" class="btn btn-primary index_btn" type="submit" value="登录" />
    </form>
    <div id="user_operation" class="btn-group pull-right hide">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-user"></i> <span id="display_user_name"><shiro:principal property="name"/></span>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="${ctx}/member/profile/edit">查看个人简介</a></li>
        <li><a href="${ctx}/member/logout">退出登录</a></li>
      </ul>
    </div>
  </div>
  <div id="select_area_modal" class="modal hide fade"></div>
</body>
</html>
